// src/pages/Medical/Layout.jsx
import React from 'react';
import { TabBar } from 'antd-mobile';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

const MedicalLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const tabs = [
    {
      key: 'consultation',
      title: '会诊',
      icon:<span class='iconfont icon-hushi '></span>
    },
    {
      key: 'referral',
      title: '转诊',
      icon:<span class='iconfont icon-yaoxiang '></span>
    }
  ];

  return (
    <div className="medical-layout">
      <TabBar
        activeKey={location.pathname.split('/').pop()}
        onChange={value => navigate(`/layout/${value}`)}
      >
        {tabs.map(item => (
          <TabBar.Item key={item.key} title={item.title} icon={item.icon}/>
        ))}
      </TabBar>
      <div style={{ padding: '12px', paddingBottom: '50px' }}>
        <Outlet />
      </div>
    </div>
  );
};

export default MedicalLayout;